<template>
  <div id="building">
    <el-form :model="formData" ref="vForm" :rules="rules" label-position="left" label-width="80px"
      size="default" @submit.prevent>
      <el-row class="box" style="background-color: #cce2f6;">
        <el-col :span="24" class="grid-cell">
          <el-form-item label="账号" prop="userName" class="required label-center-align">
            <el-input :placeholder="$t('login.userName')" v-model="formData.userName" type="text" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="passWord" class="required label-center-align">
             <el-input :placeholder="$t('login.password')" v-model="formData.passWord" type="password" autocomplete="off" clearable/>
          </el-form-item>
          <el-form-item label="确认密码" prop="passwords" class="required label-center-align">
             <el-input :placeholder="$t('login.passwords')" v-model="formData.passwords" type="password" autocomplete="off" clearable/>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" class="required label-center-align">
            <el-input :placeholder="$t('login.email')" v-model="formData.email" type="text" clearable></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="Captcha" class="captcha">
            <el-input :placeholder="$t('login.Captcha')" v-model="formData.Captcha" type="text" class="captcha" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="Captcha">
          <div>
            <el-button class="send" @click="send(formData.email,formData.emailCode)">发送验证码</el-button>
          </div>
        </el-col>
        <el-col :span="12" class="Register">
          <div>
            <el-button @click="forget(formData.userName,formData.passWord,formData.Captcha)">注册</el-button>
          </div>
        </el-col>
        <el-col :span="12" class="Cancel">
          <div>
            <el-button @click="login">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
  </template>
  
  <script>
    import {
      defineComponent,
      toRefs,
      reactive,
      getCurrentInstance
    }
    from 'vue'
    export default defineComponent({
      components: {},
      props: {},
      setup() {
       const validatePass2 = (rule, value, callback) => {
          if (value === '') {
             callback(new Error('Please input the password again'))
          } else if (value !== state.formData.passWord) {
             callback(new Error("Two inputs don't match!"))
          } else {
             callback()
          }
       }
 
        const state = reactive({
         verifyCode:"",
          formData: {
            userName: "",
            passWord: "",
            passwords: "",
            email:"",
            Captcha:"",
          },
          rules: {
            userName: [{
              required: true,
              message: '请输入账号',
            }],
            passWord: [{
              required: true,
              message: '请输入密码',
            }, {
              pattern: /^[^一-龥]+$/,
              trigger: ['blur', 'change'],
              message: '密码不能有中文'
            }],
            passwords: [{
              required: true,
              message: '请输入密码',
            }, {
              pattern: /^[^一-龥]+$/,
              trigger: ['blur', 'change'],
              message: '密码不能有中文',
            },
            {
              trigger: ['blur', 'change'],
              message: '两次密码不一致',
              validator: validatePass2
            }],
            email: [{
             required: true,
             message: '请输入邮箱',
            }],
            Captcha:[{
             required: true,
             message: '请输入验证码',
            }],
          },
        })
 
        const instance = getCurrentInstance()
        const submitForm = () => {
          instance.proxy.$refs['vForm'].validate(valid => {
            if (!valid) return
            //TODO: 提交表单
          })
        }
        const resetForm = () => {
          instance.proxy.$refs['vForm'].resetFields()
        }
        
        return {
          ...toRefs(state),
          submitForm,
          resetForm,
        }
      },
      methods:{
        login(){
            this.$router.push({
               name:"login"
            });
        },
         forget:function(userName,passWord,Captcha){
             var that = this;
             if(that.verifyCode===Captcha){
               var url ="/api/user/forget";
               const that = this;
               $.ajax({
                   type: 'post',
                   async: false,
                   dataType : 'json',
                   url: url,
                   data: [
                       {name:"userName",value:userName},
                       {name:"passWord",value:passWord},
                   ],
                   success: function (data) {
                       alert(JSON.stringify('修改成功'));
                       that.login();
 
                   },
                   error: function(msg){
                       console.error(msg);
                   }
               });
             }else{
               alert(JSON.stringify('验证码错误'));
             }
         },
         send(email){
           var url ="/api/user/sendemailregcode";
           var that = this;
             $.ajax({
               type: 'post',
               async: false,
               dataType : 'json',
               url: url,
               data: [
                   {name:"emailCode",value:email}
               ],
               success: function (data) {
                     alert(JSON.stringify('发送成功'));
                     that.verifyCode =data.code;
                 },
                 error: function(msg){
                     console.error(msg);
                 }
           });
         }
       },
    })
    
    
  </script>
  
  <style lang="scss">
  #building{
  background:url("../assets/tlg.jpg");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100% 100%;
}
    .el-input-number.full-width-input,
    .el-cascader.full-width-input {
      width: 100% !important;
    }
    
    .el-form-item--medium {
      .el-radio {
        line-height: 36px !important;
      }
      
      .el-rate {
        margin-top: 8px;
      }
    }
    
    .el-form-item--small {
      .el-radio {
        line-height: 32px !important;
      }
      
      .el-rate {
        margin-top: 6px;
      }
    }
    
    .el-form-item--mini {
      .el-radio {
        line-height: 28px !important;
      }
      
      .el-rate {
        margin-top: 4px;
      }
    }
    
    .clear-fix:before,
    .clear-fix:after {
      display: table;
      content: "";
    }
    
    .clear-fix:after {
      clear: both;
    }
    
    .float-right {
      float: right;
    }
    
  </style>
  
  <style lang="scss" scoped>
    div.table-container {
      table.table-layout {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
  
        td.table-cell {
          display: table-cell;
          height: 36px;
          border: 1px solid #e1e2e3;
        }
      }
    }
    
    div.tab-container {}
    
    .label-left-align :deep(.el-form-item__label) {
      text-align: left;
    }
    
    .label-center-align :deep(.el-form-item__label) {
      text-align: center;
    }
    
    .label-right-align :deep(.el-form-item__label) {
      text-align: right;
    }
    
    .custom-label {}
    
    .static-content-item {
      min-height: 20px;
      display: flex;
      align-items: center;
  
      :deep(.el-divider--horizontal) {
        margin: 0;
      }
    }
    .box{
    width: 449px;
     height: 350px;
     margin: 153px;
     padding: 25px;
     border: 1px solid #c2c0c0;
     margin-top: 170px;
     margin-left: 599px;
    }
    .Register{
       margin-left: -114px;
       max-width: 20%;
    }
    .Cancel{
       margin-left: 100px;
       max-width: 20%;
    }
    .captcha{
     width: 160px;
    }
    .send{
     margin-left: 200px;
     margin-top: -94px;
    }
  </style>